<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
	/* 大的table */
	table{margin: 10px auto; width: 80%; border: 1px solid #69c;border-collapse: collapse ;
	}
	/* td table 是后面的样式 */
	table tr td,table tr th{height: 30px;border: 1px solid #69c;text-align: center;font-size: 12px;
	}
.yellow{background:yellow ;}
.childdiv{height: 30px;line-height: 30px;}

</style>
<div id="app">
	<table>
		<tr>
			<th><childtd name="序号"></childtd></th>
			<th><childtd name="图书名称"></childtd></th>
			<th><childtd name="价格"></th>
		</tr>
		
		<tr>
			<td><childtd name="1"></childtd></td>
			<td><childtd name="水浒传"></childtd></td>
			<td><childtd name="40"></childtd></td>
		</tr>
		<tr>
			<td><childtd name="2"></childtd></td>
			<td><childtd name="西游记"></childtd></td>
			<td><childtd name="40"></childtd></td>
		</tr>
		<tr>
			<td><childtd name="3"></childtd></td>
			<td><childtd name="红楼梦"></childtd></td>
			<td><childtd name="40"></childtd></td>
		</tr>
		<tr>
			<td><childtd name="4"></childtd></td>
			<td><childtd name="三国演义"></childtd></td>
			<td><childtd name="40"></childtd></td>
		</tr>
	</table>
	
</div>

</head>
<body>
	<script>
		Vue.component('childtd',{
			props:["name"],
			template:"<div v-bind:class='classObj' @mouseover='change()'@mouseout='change()'>{{name}}</div>",
		data:function(){
			 return{
					choose:false
				}	
			},
			computed:{
				classObj:function(){
					return{
						yellow:this.choose,
						childdiv:true
					}
				}
			},
			methods:{
				change:function(){
					this.choose=!this.choose
				}
			}
		})
		
		new Vue({
			el:"#app",
		
	})
	</script>
</body>
</html>
